<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></script>
<!-- Bootstrap JS (Popper.js included) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.7.0/dist/js/bootstrap.min.js" integrity="sha384-btYPBdHr4HIuLMpGQj8D10OHYA7PpO3mX4lDIStEF7aiCIl2rIc1S5c+dJDDXkN" crossorigin="anonymous"></script>

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/styles.css">
    <style>
        /* Custom Styles */
        body {
            background-color: #f8f9fa; /* Light gray background */
            color: #495057; /* Dark text color */
        }

        .navbar {
            background-color: #343a40 !important; /* Dark navbar */
        }

        .navbar-dark .navbar-toggler-icon {
            background-color: #ffffff; /* White color for the navbar toggler icon */
        }

        .navbar-dark .navbar-nav .nav-link {
            color: #ffffff !important; /* White color for navbar links */
        }

        .container {
            margin-top: 20px;
        }

        .jumbotron {
            background-color: #f8f8f8;
            color: #5b5b5b; /* White text color for jumbotron */
        }

        .footer {
            background-color: #343a40; /* Dark footer background */
            color: #ffffff; /* White text color for footer */
        }
        .slider-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置一个固定的高度，可以根据需要调整 */
        }

        .slider {
            display: flex;
        }
    </style>
</head>

<body>
<nav class="navbar navbar-expand-lg navbar-dark">
    <a class="navbar-brand" href="#">
        <img src="img/trek.png" width="100px" height="50px" class="d-inline-block align-center" alt="">
        欢迎使用自行车队管理系统
    </a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <span class="nav-link">当前用户: <span th:text="${username}"></span></span>
            </li>
            <li class="nav-item">
                <a href="/logout" class="btn btn-outline-light">退出</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container" th:width="9999">
    <div class="jumbotron">
        <h2 class="text-center">欢迎使用自行车队管理系统</h2>
    </div>

    <div class="row">
        <div class="col-lg-3">
            <ul class="list-unstyled">
                <li class="m-2">
                    <a href="/main">管理系统首页</a>
                </li>
                <li class="m-2">
                    <a href="/goods">车队管理</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-lg-9">
        <div class="slider-container" >
            <div class="slider">
                <div class="slide"><img src="/img/ride1.png" alt="Image 1"></div>
                <div class="slide"><img src="/img/ride6.png" alt="Image 2"></div>
                <div class="slide"><img src="/img/ride7.png" alt="Image 4"></div>
            </div>
        </div>
        <script src="/script.js"></script>
    </div>
</div>

<footer class="footer text-center py-3">
    <p>© 2023 Your Company. All Rights Reserved. | Designed by <a class="text-light">21106110 孔维琦</a></p>
</footer>
</body>

</html>